<template>
  <view :class="['flex-col', styles['page']]">
    <view :class="['flex-col', styles['group_1']]">
      <view :class="['flex-row', styles['section_1']]">
        <image
          src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62fc47915a7e3f03104a86ad/62fc5739689f2800114f399c/16607046189625319208.png"
          :class="[styles['image_3']]" />
        <text :class="[styles['text_1']]">每个充值卡PIN码只能使用一次，请妥善保管</text>
      </view>
      <view :class="['flex-col']">
        <view :class="['flex-col', styles['list-item']]" :key="i" v-for="(item, i) in list_iWgm5Opo">
          <view :class="['flex-row', styles['group_3']]">
            <text :class="[styles['text_2']]">2020-05-12</text>
            <text :class="[styles['text_4']]">16:08:42</text>
          </view>
          <view :class="['flex-col', styles['section_2']]">
            <view :class="['justify-between']">
              <view :class="['flex-row']">
                <text :class="[styles['text_6']]">1000</text>
                <text :class="[styles['text_7']]">Birr</text>
              </view>
              <text :class="[styles['text_8']]">¥0.11</text>
            </view>
            <view :class="['flex-col', styles['group_6']]">
              <view :class="['flex-row', styles['group_7']]">
                <text :class="[styles['text_9']]">PIN码:</text>
                <text :class="[styles['text_10']]">76877802809860</text>
              </view>
              <view :class="['justify-between', styles['group_8']]">
                <view :class="['flex-col']">
                  <view :class="['flex-row']">
                    <text :class="[styles['text_11']]">序列号：</text>
                    <text :class="[styles['text_12']]">0000000001</text>
                  </view>
                  <view :class="['flex-row', styles['group_11']]">
                    <text :class="[styles['text_13']]">过期时间：</text>
                    <text :class="[styles['text_14']]">2021/05/20</text>
                  </view>
                </view>
                <view :class="['flex-row', styles['section_3']]">
                  <text :class="[styles['text_15']]">充值</text>
                  <image
                    src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62fc47915a7e3f03104a86ad/62fc5739689f2800114f399c/16607046189626687466.png"
                    :class="[styles['image_4']]" />
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
import Taro from '@tarojs/taro';
import styles from './huaban_1.module.css';
import { ref } from 'vue'

const list_iWgm5Opo = ref([null, null])
</script>